<template>
 <div class="right-bar">
     <div class="rightbar-item">
         <div class="avatar-border">
              <router-link to="/me">
             <img src="../../assets/img/xxx.jpeg" alt="">
             <span class="iconfont icon-jia"></span>
              </router-link>
         </div>
    </div>
     <div class="item-icon">
         <span class="iconfont icon-xin"></span>
         <p>18.0w</p>
     </div>
     <div class="item-icon" @click.stop="showCom($event)">
         <span class="iconfont icon-tubiaozhizuo-"></span>
         <p>18.0w</p>
     </div>
     <div class="item-icon">
         <span class="iconfont icon-arrow-"></span>
         <p>18.0w</p>
     </div>
     <div class="rightbar-item">
         <div class="right-music">
             <img src="../../assets/img/xxx.jpeg" alt="">
         </div>
     </div>
 </div>
</template>

<script>
export default {
    props:['showComment'],
    data(){
        return{

        }
    },
    methods:{
        showCom(e){
            e.preventDefault();
            this.$emit('changeCom',this.showComment);
        }
    }
}
</script>

<style scoped>
    .right-bar .rightbar-item{
        height: 60px;
        width: 100%;  
        display: flex;
        justify-content: center;
        align-items: center;
        padding-bottom: 10px;
    }
    .avatar-border{
        height:50px;
        border:1px solid #ffffff;
        border-radius: 50%;
        position: relative;
    }
    .avatar-border img{
        width:49px;
        height: 49px;
        border-radius: 50%;
    }
    .avatar-border .icon-jia{
        font-size: 20px;
        color: #fe2c5a;
        position: absolute;
        top:39px;
        left:15px;
        right: 0;
    }
    .right-bar .item-icon{
        height: 60px;
        text-align: center;
        padding-top: 12px;
    }
    .item-icon .iconfont{
        color: #ffffff;
        font-size: 30px;
    }
    .item-icon p{
        color: #ffffff;
        font-size: 14px;
        padding-top: 5px;
        
    }
    .rightbar-item .right-music{
        height: 54px;
        width: 54px;
        border-radius: 50%;
        background: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: round 6s 0s linear infinite;
    }
    .rightbar-item .right-music img{
        height: 30px;
        width: 30px;
        border-radius: 50%;
    }
    @keyframes round{
        0%{
            transform: rotate(0deg);
        }
        100%{
            transform: rotate(360deg);
        }
    }
</style>>
